<template>
	<view class="eq-wrapper">
		<view class="bg">
			<image src="/static/imgs/bg.webp" mode="widthFix"></image>
		</view>
		<view class="eq-header">
			<view class="arrow-left" @click="toBack">
				<image class="icon" src="/static/imgs/i-left.png" mode="widthFix"></image>
			</view>
			<view class="search">
				<image class="icon" src="/static/search.png" mode="widthFix"></image>
				<input type="text" placeholder="搜索本店商品" style="padding-left: 20rpx;">
			</view>
			<view class="sale" @click="toSale">
				<image class="icon" src="/static/imgs/i-shop.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="eq-primary">
			<view class="layout">
				<view class="top">
					<view class="t-left">
						<image :src="shopLogo" mode="widthFix"></image>
					</view>
					<view class="t-right">
						<view class="title">{{shopName}}</view>
						<image class="icon_star" src="/static/star.png" mode="widthFix"></image>
						<view class="text">销量 59.8万 | 收藏 86256</view>
					</view>
				</view>
				<view class="quality">
					<view class="q-left">
						<image class="icon" src="/static/imgs/logo.png" mode="widthFix"></image>
						<text>品质保障</text>
					</view>
					<text class="txt1">7天无理由退货·72小时发货·延误险·运费险</text>
				</view>
				<view class="box">
					<view class="tabs">
						<view class="tabNum" :class="{active: activeNav == 'index'}" @click="switchTab('index')">首页</view>
						<view class="tabNum" :class="{active: activeNav == 'all'}" @click="switchTab('all')">全部</view>
						<view class="tabNum" :class="{active: activeNav == 'new'}" @click="switchTab('new')">上新</view>
						<view class="tabNum" :class="{active: activeNav == 'category'}" @click="switchTab('category')">分类</view>
					</view>
				</view>
			</view>
			<!-- 标签内容 -->
			<view class="tabContent">
				<!-- 首页 -->
				<view class="tabIndex" v-show="activeNav == 'index'">
					<view class="banner">
						<image src="/static/imgs/banner.webp" mode="widthFix"></image>
					</view>
					
					<view class="banner">
						<image src="/static/imgs/img1.webp" mode="widthFix"></image>
					</view>
					
					<view class="banner">
						<image src="/static/imgs/sale.webp" mode="widthFix"></image>
					</view>
					
					<view class="grid">
						<view class="grid-item" v-for="item in 7">
							<view class="main">
								<image src="/static/imgs/img2.webp" mode="widthFix"></image>
							</view>
							<view class="conts">
								<view class="c-title">
									时尚气质露肩雪纺衫女夏装新款木耳边短袖衬衫洋气上衣小衫
								</view>
								<view class="box">
									<view class="left">¥169.0</view>
									<view class="right">
										<text>1</text>
										<image class="icon" src="/static/imgs/i-fstar-n.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="banner">
						<image src="/static/imgs/new.webp" mode="widthFix"></image>
					</view>
					
					<view class="grid">
						<view class="grid-item" v-for="item in 4">
							<view class="main">
								<image src="/static/imgs/img3.webp" mode="widthFix"></image>
							</view>
							<view class="conts">
								<view class="c-title">
									秋冬特价棉马甲女学生短款韩版可拆卸连帽羽绒棉背心大码外套
								</view>
								<view class="box">
									<view class="left">¥99.0</view>
									<view class="right">
										<text>58</text>
										<image class="icon" src="/static/imgs/i-fstar-n.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="banner">
						<image src="/static/imgs/like.webp" mode="widthFix"></image>
					</view>
					
					<view class="grid">
						<view class="grid-item" v-for="item in 6">
							<view class="main">
								<image src="/static/imgs/img4.webp" mode="widthFix"></image>
							</view>
							<view class="conts">
								<view class="c-title">
									60两件春秋圆环拉链上衣高领显瘦修身长袖打底衫T恤女针织毛衣
								</view>
								<view class="box">
									<view class="left">¥99.0</view>
									<view class="right">
										<text>4142</text>
										<image class="icon" src="/static/imgs/i-fstar-n.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 全部 -->
				<view class="tabAll" v-show="activeNav == 'all'">
					<view class="navlist">
						<view class="nav" :class="{active: activeEl == '0'}" @click="switchEl(0)">综合</view>
						<view class="nav" :class="{active: activeEl == '1'}" @click="switchEl(1)">销量</view>
						<view class="nav" :class="{active: activeEl == '2'}" @click="switchEl(2)">新品</view>
						<view class="nav" :class="{active: activeEl == '3'}" @click="switchEl(3)">价格</view>
					</view>
					<view class="grid">
						<view class="grid-item" v-for="item in 5">
							<view class="main">
								<image src="/static/imgs/img5.webp" mode="widthFix"></image>
							</view>
							<view class="conts">
								<view class="c-title">
									春夏上衣女新款荷花边长袖t恤女学生韩版宽松纯色露脐短款上衣女
								</view>
								<view class="box">
									<view class="left">¥99.0</view>
									<view class="right">
										<text>203</text>
										<image class="icon" src="/static/imgs/i-fstar-n.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 上新 -->
				<view class="tabNew" v-show="activeNav == 'new'">还没有商品哦，快去添加~</view>
				<!-- 分类 -->
				<view class="tabCategory" v-show="activeNav == 'category'">
					<view class="label">
						<view class="cateLab" :class="{active: activeLab == '1'}" @click="switchLab(1)">【50元两件专区】</view>
						<view class="cateLab" :class="{active: activeLab == '2'}" @click="switchLab(2)">【55元两件专区】</view>
						<view class="cateLab" :class="{active: activeLab == '3'}" @click="switchLab(3)">【70元两件专区】</view>
						<view class="cateLab" :class="{active: activeLab == '4'}" @click="switchLab(4)">【80元两件专区】</view>
						<view class="cateLab" :class="{active: activeLab == '5'}" @click="switchLab(5)">【年终清仓专区】</view>
					</view>
					<view class="grid">
						<view class="grid-item" v-for="item in 6">
							<view class="main">
								<image src="/static/imgs/img5.webp" mode="widthFix"></image>
							</view>
							<view class="conts">
								<view class="c-title">
									春夏上衣女新款荷花边长袖t恤女学生韩版宽松纯色露脐短款上衣女
								</view>
								<view class="box">
									<view class="left">¥99.0</view>
									<view class="right">
										<text>203</text>
										<image class="icon" src="/static/imgs/i-fstar-n.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="textBom">没有更多内容了~</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {onLoad} from '@dcloudio/uni-app';
	const activeNav = ref('index');
	const activeEl = ref(0);
	const activeLab = ref(0);
	
	const shopName = ref(''); 
	const shopLogo = ref('');
	  
	  onLoad((options) => {
	    if (options.shopName && options.shopLogo) {
	      shopName.value = decodeURIComponent(options.shopName);
	      shopLogo.value = decodeURIComponent(options.shopLogo);
	    }
	  });
	  
	
	
	const switchTab = (nav) => {
		activeNav.value = nav
	};
	const switchEl = (id) => {
		activeEl.value = id
	};
	const switchLab = (item) => {
		activeLab.value = item
	};
	const toBack = () => {
		uni.navigateBack(-1);
	};
	const toSale = () => {
		uni.navigateTo({
			url:'/pages/shopCart/shopCart'
		})
	}
	
</script>

<style lang="scss" scoped>
	.eq-wrapper {
		width: 100%;
		font-size: 20rpx;
		position: relative;
		.icon {
			width: 35rpx;
			cursor: pointer;
		}
		image {
			display: block;
		}
		.bg {
			width: 100%;
			image {
				width: 100%;
				opacity: .1;
			}
		}
		.eq-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			position: absolute;
			width: 100%;
			top: 30rpx;
			left: 0;
			.search {
				width: 70%;
				display: flex;
				align-items: center;
				background-color: rgba(215,215,215,.4);
				padding: 10rpx 15rpx;
				border-radius: 50rpx;
			}
			.uni-input-placeholder {
				font-size: 20rpx;
			}
		}
		.eq-primary {
			position: absolute;
			left: 0;
			right: 0;
			top: 120rpx;
			.layout {
				width: 100%;
				padding: 20rpx 0rpx 0;
				background: linear-gradient(to bottom, rgba(255,255,255,.3) 10%, rgba(255,255,255,1) 90%);
				box-sizing: border-box;
				border-bottom: 2rpx solid #e5e5e5;
				.top {
					display: flex;
					align-items: center;
					box-sizing: border-box;
					.t-left {
						width: 120rpx;
						height: 120rpx;
						padding: 10rpx 25rpx;
						box-sizing: border-box;
						image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}
					.t-right {
						line-height: 1.7;
						.title {
							font-size: 28rpx;
						}
						.icon_star {
							width: 20rpx;
						}
					}
				}
				.quality {
					width: 90%;
					text-align: center;
					margin: 0 auto;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 20rpx;
					margin-top: 20rpx;
					background-color: #FAEDDE;
					border-radius: 10rpx;
					.q-left {
						display: flex;
						align-items: center;
						image {
							margin-right: 10rpx;
						}
						text {
							font-size: 25rpx;
							
						}
					}
				}
				.box {
					margin-top: 30rpx;
					.tabs {
						display: flex;
						align-items: center;
						justify-content: space-around;
						.tabNum {
							font-size: 30rpx;
							padding: 15rpx 0;
							&.active {
								border-bottom: 3rpx solid #ff2255;
								color: #ff2255;
							}
						}
					}
				}
			}
				
			// 分页内容
			.tabContent {
				width: 100%;
				.grid {
					width: 100%;
					box-sizing: border-box;
					background-color: #EFEFEF;
					padding: 10rpx 15rpx;
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 12rpx;
					.grid-item {
						border-radius: 30rpx;
						margin-bottom: 10rpx;
						.main {
							width: 100%;
							image {
								width: 100%;
								display: block;
							}
						}
						.conts {
							border-radius: 5rpx;
							background-color: #fff;
							padding: 20rpx 15rpx;
							.c-title {
								line-height: 1.5;
								font-size: 26rpx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
							}
							.box {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-top: 24rpx;
								font-size: 24rpx;
								.right {
									display: flex;
									align-items: center;
									text {
										margin-right: 5rpx;
									}
								}
							}
						}	
					}
				}
				
				// 首页
				.tabIndex {
					width: 100%;
					box-sizing: border-box;
					.banner {
						width: 100%;
						text-align: center;
						margin: 0rpx 0 15rpx;
						background-color: #fff;
						image {
							width: 100%;
						}
					}
					.gap {
						width: 100%;
						height: 15rpx;
						margin-top: 10rpx;
						background-color: #EFEFEF;
					}
				}
				// 全部
				.tabAll {
					.navlist {
						display: flex;
						align-items: center;
						justify-content: space-around;
						background-color: #FAFAFA;
						margin-bottom: 10rpx;
						.nav {
							padding: 10rpx 0;
							line-height: 1.7;
							font-size: 25rpx;
							&.active {
								color: #ff2255;
							}
						}
					}
				}
				// 上新
				.tabNew {
					width: 100%;
					text-align: center;
					font-size: 25rpx;
					line-height: 1.75;
					min-height: 200rpx;
					margin-top: 30rpx;
				}
				// 分类
				.tabCategory {
					padding-bottom: 20rpx;
					.label {
						width: 100%;
						margin: 20rpx 0;
						padding: 0 10rpx;
						display: flex;
						align-items: center;
						flex-shrink: 0;
						overflow-x: auto;
						-webkit-overflow-scrolling: touch;
						scrollbar-width: none;
						&::-webkit-scrollbar {
							display: none;
						}
						.cateLab {
							flex-shrink: 0;
							padding: 10rpx 20rpx;
							background-color: #f5f5f5;
							margin-right: 30rpx;
							border-radius: 5rpx;
							font-size: 25rpx;
							&.active {
								color: #ff2255;
							}
						}
					}
					.textBom {
						text-align: center;
					}
					
				}
			
			}
				
		}
	}   
</style>
